<template>
  <!-- min-h-0防止溢出导致布局异常 -->
  <div class="chat-flow flex-1 min-h-0">
    <div class="chat-main">
      <div class="chat_header justify-between flex items-center w-full">
        <div>
          <div v-show="chatCollapsed">
            <SvgIcon
              name="sidebar_left"
              title="打开侧栏"
              class="header-icon mr-[10px]"
              @click="openChatSidebar(false)"
            />
          </div>
        </div>
        <span class="flex-end">案件查询</span>
      </div>
      <!-- flex-1强制​占用父容器剩余的全部空间​​ -->
      <div ref="chatContentRef" class="chat_content">
        <div class="chat_content_list h-full w-full">
          <div v-for="message in messageList" :key="message.id">
            <div v-show="message.type === 'chat'">
              <AssistantChat :content="message" />
            </div>
            <div v-show="message.type === 'user'">
              <UserChat :content="message" />
            </div>
          </div>
        </div>
      </div>
      <div class="chat_input relative flex items-end">
        <div class="chat_input_content relative flex items-center">
          <div class="pb-[40px] w-full p-[12px]">
            <div className="flex justify-between mb-[5px]">
              <div>
                <a-button type="text" title="历史记录" size="small">
                  <template #icon>
                    <HistoryOutlined />
                  </template>
                </a-button>
                <a-button type="text" title="上传文件" size="small" class="ml-[10px]">
                  <template #icon>
                    <UploadOutlined />
                  </template>
                </a-button>
                <a-button type="text" title="节点" size="small" class="ml-[10px]">
                  <template #icon>
                    <NodeIndexOutlined />
                  </template>
                </a-button>
              </div>
              <div>
                <a-button type="text" title="发送任务" size="small" class="ml-[10px]">
                  <template #icon>
                    <SendOutlined />
                  </template>
                </a-button>
              </div>
            </div>
            <a-textarea
              class="user_input"
              v-model:value="inputText"
              placeholder="请输入消息"
              :auto-size="{ minRows: 4, maxRows: 4 }"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, onMounted } from 'vue';
  // import { PicLeftOutlined } from '@ant-design/icons-vue';
  import { HistoryOutlined, UploadOutlined,NodeIndexOutlined,SendOutlined } from '@ant-design/icons-vue';

  import { useChatBoxStore } from '@/store/chat';
  import { storeToRefs } from 'pinia';

  const UserChat = defineAsyncComponent(() => import('./userChat.vue'));
  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon/index.vue'),
  );
  const AssistantChat = defineAsyncComponent(
    () => import('./assistantChat.vue'),
  );

  const chatBoxStore = useChatBoxStore();
  const { chatCollapsed } = storeToRefs(chatBoxStore);

  const chatContentRef = ref<HTMLElement | null>(null);
  const inputText = ref<string>('');
  const messageList = ref([
    {
      id: 1,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 2,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 3,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 4,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 5,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 6,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 7,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 8,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 1,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 2,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 3,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 4,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 5,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 6,
      content: 'I need some information about the case.',
      type: 'chat',
    },
    {
      id: 7,
      content: 'Hello, how can I help you?',
      type: 'user',
    },
    {
      id: 8,
      content: 'I need some information about the case.',
      type: 'chat',
    },
  ]);

  const openChatSidebar = (collapsed: boolean) => {
    chatBoxStore.updataCollapsed(collapsed);
  };

  const scrollToBottom = () => {
    //自动更新到最新消息
    console.log(chatContentRef.value);
    if (chatContentRef.value) {
      chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight;
    }
  };

  onMounted(() => {
    scrollToBottom();
  });
</script>

<style scoped lang="scss">
  @use '@/theme/chat.scss';
</style>
